<template>
  <div>
    <el-card v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)" class="board-hover">
      <div slot="header">
        <span class="title" @click="handleTitle">流程运行监控</span>
        <span class="desc">双击明细查看</span>
        <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="getlist()" />
        <span class="tip">每分钟自动刷新:{{ loadTime }}</span>
      </div>
      <el-table v-loading="loading" :data="dataList" @row-dblclick="handleDetail" :row-style="{ height: '32px' }" :cell-style="{ padding: '0px' }"
        :max-height="460" border :row-class-name="tableRowClassName" highlight-current-row>
        <el-table-column label="编码" width="200" align="center" prop="flowCode" fixed show-overflow-tooltip />
        <el-table-column label="名称" width="160" align="center" prop="flowName" fixed show-overflow-tooltip />
        <el-table-column label="状态" width="120" align="center" prop="statusName" fixed />
        <el-table-column label="开始时间" width="180" align="center" prop="startTime" />
        <el-table-column label="结束时间" width="180" align="center" prop="endTime" />
        <el-table-column label="耗时" width="180" align="center" prop="runTime" :formatter="formatRun" />
        <el-table-column label="流程ID" width="200" align="center" prop="flowID"/>
        <el-table-column label="错误消息" width="300" align="center" prop="errMsg" show-overflow-tooltip />
        <el-table-column label="执行方法" width="360" align="center" prop="method" show-overflow-tooltip />
      </el-table>
    </el-card>
    <!-- 运行详情弹框 -->
    <RunTimeDlg ref="RunTimeDlg"></RunTimeDlg>
  </div>
</template>

<script>
import { getRuntimeInfo } from "@/api/aitcommon/aitdashboard";
import { formatDuring } from "@/utils/ait";
import RunTimeDlg from '@/components/AIT/RunTimeDlg';

export default {
  name: "rumtime",
  components: { RunTimeDlg },
  data() {
    return {
      dataList: [],
      loading: false,
      loadTime: '',
      // 定时刷新(秒)
      timeSec: 60,
      timeChecked: true,
      timer: {},
    }
  },
  created() {
    this.getlist();

    // 设置定时刷新
    if (this.timeChecked) {
      this.timer = window.setInterval(this.getlist, this.timeSec * 1000);
    } else {
      window.clearInterval(this.timer);
    }
  },
  methods: {
    handleTitle(){
      // 参考 https://blog.csdn.net/qq_41206305/article/details/121494328
      // Vue this.$router.push() 获取不到params参数 https://blog.csdn.net/qq_59347596/article/details/130158869
      this.$router.push({
        // path: "/ait/aitconfig",
        name: "aitconfig",
        params:{
          queryParams:{isRun:true},
        },
      });
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      if (row && row.flowCode) {
        this.$refs.RunTimeDlg.openDlg(row.flowCode);
      }
    },
    getlist() {
      this.loading = true;
      getRuntimeInfo().then(res => {
        // console.info('getlist',res.data);
        this.loadTime = this.parseTime(new Date());
        this.dataList = res.data
        // console.info('getlist',this.dataList)
      }).finally(() => {
        this.loading = false;
      })
    },
    tableRowClassName({ row, rowIndex }) {
      // tablerow的样式,需要在ait.scss中设置
      let className="";
      if(rowIndex%2==0)
        className+=" trip-row "
      if (row.status == 0) {
        // 关闭
        if(row.logStatus==0)//INFO
          return className+=' complete-row ';
        else if(row.logStatus==1)//WARN
          return className+=' warn-row ';
        else if(row.logStatus==2)//ERROR
          return className+=' abnormal-row ';
      } else if (row.status == 1) {
        // 运行中
        if (row.runTime < this.timeSec * 1000) {
          return className+=' normal-row ';
        } else {
          // 超长运行,警告
          return className+=' warn-row ';
        }
      }
      return className;
    },

    // 时间格式化
    formatRun(row, col) {
      return formatDuring(row.runTime)
    }
  }
}
</script>

<style lang="scss" scoped>
.board-hover {
  &:hover {
    box-shadow: 0 2px 12px 0 brown;
  }
}

.tip {
  float: right;
  color: gray;
  font-size: 10px;
  margin-right: 10px;
}

.title{
  &:hover {
    color: brown;
    text-shadow: 2px 2px 5px;
    text-decoration: underline;
    cursor: pointer;
  }
}

.desc{
  margin: 0 10px;
  color: gray;
  font-style: italic;
}

</style>